<!-- 视图点位 -->

<template>
  <div :class="pointClass" :style="pointStyle" @click.stop="toShowSingle">
    <img :src="obj.online ? pointImg : pointImgOff" />

    <span v-if="hasGather">{{ obj.points.length }}</span>

    <div>
      <EasyScroll :height="scrollHeight">
        <div v-for="point in obj.points" :key="point.id" :class="getDeviceClass(point)" @click.stop="toShow(point)">
          {{ point.deviceName }}
        </div>
      </EasyScroll>
    </div>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import props from './props'
import UTIL from '../../../UTIL'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'ViewPoint',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixWeb('map', 'map_')],

  /**
   * 属性注册 (抽取以便查阅)
   */
  props,

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 点位图片
     */
    pointImg: () => UTIL.getImg('point'),

    /**
     * 离线的点位图片
     */
    pointImgOff: () => UTIL.getImg('point-off'),

    /**
     * 父组件视图
     */
    parentView() {
      return CORE.componentParent(this, 'MapView') || {}
    },

    /**
     * 有无聚合
     */
    hasGather() {
      return this.obj.points.length > 1
    },

    /**
     * 滚动条高度
     */
    scrollHeight() {
      const { obj: { points } } = this
      return (points.length > 5 ? 5 : points.length) * 30
    },

    /**
     * 点位样式类
     */
    pointClass() {
      const name = 'SecureOverview-MapView-point'
      return `${name} ${name}-${this.obj.points.length} noMove`
    },

    /**
     * 点位样式对象
     */
    pointStyle() {
      const { obj, $parent: { readyImg }, parentView: { scale = 1, rotate = 0 } } = this
      const opacity = readyImg ? 1 : 0
      const left = `${obj.left}%`
      const top = `${obj.top}%`
      const marginTop = `-${22 / scale}px`
      const transform = `translate(-50%, -50%) scale(${1 / scale}) rotate(${-rotate}deg)`
      return { opacity, left, top, marginTop, transform }
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 打开未聚合的单个详情
     */
    toShowSingle() {
      const { points } = this.obj
      if (points.length === 1) this.map_openShow(points[0])
    },

    /**
     * 打开聚合中的某个详情
     */
    toShow(point) {
      const { points } = this.obj
      if (points.length > 1) this.map_openShow(point)
    },

    /**
     * 获取设备样式类
     */
    getDeviceClass(device) {
      return device.online ? null : 'SecureOverview-MapView-point-off'
    },
  },
}
</script>
